<template>
  <div class="">
    <div style="width: 100%; height: 100%; position: relative">
      <div class="myChart" ref="myChart"></div>
      <div class="zb_space">
        <div class="zb_space_txt_center">
          <div class="lenth">
            <div class="tag" style="background: #4baf02"></div>
            <div>库位总数</div>
            <div class="num">{{ Usage.total }}</div>
          </div>
          <div class="lenth" style="margin: 10px 0">
            <div class="tag" style="background: #eaf112"></div>
            <div>占用总数</div>
            <div class="num">{{ Usage.occupy }}</div>
          </div>
          <div class="lenth">
            <div class="tag" style="background: #aed80c"></div>
            <div>可用库位数</div>
            <div class="num">{{ Usage.usable }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// http://echarts.zhangmuchen.top/#/detail?cid=xT1JWXkiKc
import * as echarts from "echarts";
import { api } from "@/utils/api";

export default {
  name: "Proportion",
  data() {
    return {
      myCharts: null,
      Usage: {
        usage: 0,
      },
      timer: null,
      roundTimer: null,
    };
  },
  mounted() {
    this.getNdsdUsage().then((res) => {
      this.OptionSet();
    });
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    } else {
      this.timer = setInterval(() => {
        this.getNdsdUsage().then((res) => {
          this.OptionSet();
        });
      }, 10000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.roundTimer);
    this.timer = null;
    this.roundTimer = null;
  },
  methods: {
    getNdsdUsage() {
      return new Promise(async (reslove, reject) => {
        let params = {};
        let [ERR, LRES] = await api.getNdsdUsageAPI();
        this.Usage = LRES.data;
        reslove(LRES.data);
        // console.log("getNdsdUsage", LRES);
      });
    },
    OptionSet() {
      clearInterval(this.roundTimer);
      this.roundTimer = null;
      let myCharts = echarts.init(this.$refs.myChart);
      let num = 0;
      // console.log("getNdsdUsage_OptionSet", this.Usage);
      let option = {
        // label: {
        //   show: false,
        // },
        title: [
          {
            text: "利用率",
            x: "22%",
            top: "52%",
            textStyle: {
              color: "#fdf914",
              fontSize: 16,
              fontWeight: "100",
            },
          },
          {
            text: this.Usage.usage,
            x: "22%",
            top: "36%",
            textStyle: {
              fontSize: "24",
              color: "#fdf914",
              fontFamily: "Lato",
              foontWeight: "600",
            },
          },
        ],
        polar: {
          radius: ["74%", "80%"],
          center: ["30%", "50%"],
          //   center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            // name: "test1",
            type: "bar",
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(66, 66, 66, .3)",
            },
            data: [66],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#fdf914",
                  },
                  {
                    offset: 1,
                    color: "#38a700",
                  },
                ]),
              },
            },
          },
          {
            type: "gauge",
            // name: "test2",
            radius: "87%",
            startAngle: "0",
            endAngle: "-359.99",
            splitNumber: "200",
            center: ["30%", "50%"],
            pointer: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 95,
                name: "",
              },
            ],
            axisLine: {
              lineStyle: {
                width: 20,
                opacity: 0,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 13,
              lineStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#111",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(66, 66, 66, 1)",
                    },
                    {
                      offset: 1,
                      color: "#111",
                    },
                  ],
                  globalCoord: false,
                },
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            // name: "test3",
            type: "pie",
            startAngle: 90,
            radius: ["60%", "62%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .4)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["62.5%", "64%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .3)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["64.5%", "65.8%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .2)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: ["66.5%", "67.5%"],
            hoverAnimation: false,
            center: ["30%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: "rgba(66, 66, 66, .1)",
                shadowBlur: 10,
                shadowColor: "rgba(253, 249, 20, .3)",
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            name: "",
            type: "custom",
            coordinateSystem: "none",
            center: ["30%", "50%"],
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / (100 / 30),
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.545,
                  startAngle: ((0 + num) * Math.PI) / 180,
                  endAngle: ((1 + num) * Math.PI) / 180,
                },
                style: {
                  stroke: "#fdf914",
                  fill: "transparent",
                  lineWidth: 5,
                },
                silent: true,
              };
            },
            data: [0],
          },
        ],
      };
      myCharts.setOption(option, true);

      function numb() {
        num = num + 5;
        myCharts.setOption(option, true);
      }
      this.roundTimer = setInterval(function () {
        numb();
        // console.log('numb');
      }, 100);
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "FZY4JW";
  src: url("../../assets/font/FZY4JW.TTF");
}
@font-face {
  font-family: "FZZiYHJW";
  src: url("../../assets/font/FZZiYHJW.TTF");
}
.zb_space {
  font-family: "FZY4JW";
  .lenth {
    display: flex;
    justify-content: center;
    align-items: center;
    .num {
      font-size: 28px;
      padding-left: 8px;
      position: relative;
      bottom: 2px;
    }
    span {
      font-size: 28px;
    }
  }
  .tag {
    width: 8px;
    height: 8px;
    background: fuchsia;
    border-radius: 50%;
    margin-right: 5px;
  }
  // width: 40%;
  height: 80%;
  //   border: 1px solid rebeccapurple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  .zb_space_txt_center {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // height: 70%;
    // border: 1px solid blue;
  }
}
.myChart,
.myChart2 {
  width: 100%;
  height: 100%;
}
</style>
